/*   
Theme Name: North Gate
Theme URI: http://calpresstheme.org
Description: North Gate is a child theme for the unstyled Wordpress theme framework CalPress, a media-centric WordPress theme.
Author: Josh Williams
Author URI: http://joshwilliams.com
Template: calpress
Version: 0.1
Tags: CalPress, Media, Journalism
.
North Gate and CalPress are © Regents of the University of California
*/

/* Load CalPress Basic CSS, which includes resets, sane typography and 960 grid */
@import url('../calpress/assets/css/calpress-960-min.css');

/* add uncompressed CalPress base CSS */
@import url('../calpress/assets/css/calpress-base.css');

/* 
    Style Guide
    Primary yellow: #ffe286
*/

body {
	color: #000;
	font-size: 12px;
	font-family: Verdana,"Helvetica Neue", Arial, sans-serif;
	background: #ccc url('images/bg/bg-body.png') repeat-x center top;
}

#wrapper{
    margin-top: 10px;
    border: 10px solid #f1f1f1;
    background-color: #fff;
    background: #fff url('images/bg/bg-wrapper-2col.png') repeat-y 0 0;
}

body.page-template-template-wide-php #wrapper{
    background-image: none;
}

#container{
    border-top: 10px solid #f1f1f1;
}

/* White boxes */
#header, #menu, #lead-story, #secondary-block, #sidebar li, #footer{
    background-color: #fff;
}

/* Header */

#header{
    padding: 40px 0 40px 0;
}

    #blog-title h1 a{
        display: block;
        width: 464px;
        height: 38px;
        background: transparent url('images/masthead.png') no-repeat 0 0;
        text-indent: -9999em;
        margin-left: 238px;
    }

    #blog-description{
        display: none;
    }
    
    #pre-title{
        text-transform:uppercase;
        font-size: 10px;
        margin-top: 5px;
    }

    #pre-title p{
        margin-bottom: 0;
    }
    
    #pre-title .date, #pre-title .weather, #pre-title .element{
        display: inline;
    }
    
    #pre-title .date{
        font-weight: bold;
    }
    
    #pre-title .date + .weather, #pre-title .element{
        border-left: 1px solid #f1f1f1;
        padding: 3px 5px;
        margin-left: 5px;
    }

#menu{
    font-weight: 600;
    font-size: 1.1em;
}

    #menu ul{
        margin: 0 0 10px 0;
    }

    #menu li{
        border-bottom: 3px solid #fff;
    }

    #menu li:hover{
        border-bottom: 3px solid #ffe286;
    }

/*************************
 Sidebar 
*************************/

li#contact-staff{
    height: 76px;
}

#contact-staff h3{
    background: transparent url('images/icons/something-to-say.png') no-repeat 0 0;
    height: 76px;
    text-indent: -999em;
    margin-bottom: 0;
}

#contact-staff a{
    display: block;
    width: 200px;
    margin-top: -17px;
    margin-left: 10px;
    font-weight: bold;
    text-decoration: none;
    font-size: 10px;
    text-align: center;
}

#sidebar .xoxo ul, #sidebar .xoxo ol{
    margin-bottom: 0px;
}

/* Footer */
#footer{
    background: #fff url('images/footer-twitterbar.png') no-repeat center top;
    border-top: 10px solid #f1f1f1;
    text-align: left;
    margin-bottom: 0;
}

    #footer #footer-col1, #footer-col2, #footer-col3{
        width: 300px;
        float: left;
        margin: 10px;
    }
    
    #footer #footer-col1{
        margin-left: 0;
    }
    
    #footer #footer-col3{
        margin-right: 0;
    }
    
    #footer #footer-credits{
        clear: left;
        text-align: center;
    }

    #footer a{
        text-decoration: none;
    }

    #footer h3, #footer h4{
        text-transform: uppercase;
    }

    #footer #last-tweet{
        border-bottom: 10px solid #f1f1f1;
        height: 44px;
    }
    
    #footer #last-tweet p{
        display: block;
        width: 870px;
        padding: 9px 10px 0 60px;
        font-size: 10px;
        line-height: 14px;
        margin: 0;
    }
    
    #footer #last-tweet a.aktt_tweet_time{
        font-weight: bold;
        text-decoration: underline;
    }
    
    #footer #last-tweet p span.latest,  #footer #last-tweet p span.twitterhandle{
        font-weight: 600;
        text-transform: uppercase;
        font-size: 14px;
        padding-right: 5px;
    }
    
    #last-tweet a{
        text-decoration: underline;
    }
    
    #footer #last-tweet p span.tweet{
        vertical-align:top;
    }
    
    #footer #team-grid{
        overflow: auto;
        width: 100%;
        margin-bottom: 5px;
    }

    #footer #team-grid a{
        display: block;
        height: 56px;
        width: 56px;
        float: left;
        margin-left: 5px;
        margin-bottom: 5px;
    }
    #footer #team-grid a:first-child, #footer #team-grid a.first{
        margin-left: 0;
    }
    
    #footer-social h6{
        margin: 0;
        color: #7C7C7C;
        font-weight: 400;
        padding-left: 50px;
        font-size: 1.1em;
    } 
    
    #footer-social p{
        display: block;
        margin: 0;
        padding: 0;
        padding-left: 50px;
        position: relative;
        height: 20px;
        top: -20px;
        padding-top: 20px;
        font-size: .9em;
    }
    
    #footer-social p a{
        display:block;
        position: relative;
        width: 90px;
        left:-50px;
        padding-left: 50px;
        top: -20px;
        padding-top: 20px;
        
    }
    
    ul#footer-social{
        border-top: 1px solid #ccc;
        padding-top: 10px;
        overflow: auto;
        width: 300px
    }
    
    ul#footer-social li{
        float: left;
        display: block;
        width: 140px;
        height: 42px;
        padding: 5px 0;
        margin: 0 5px 10px 5px;
        border-bottom: 1px dashed #ccc;
        background-color: transparent;
        background-repeat: no-repeat;
        background-position: 4px 4px;
    }
    
    #footer-social li.rss{
       background-image: url('images/footer/social-rss.png');
    }
    
    #footer-social li.twitter{
       background-image: url('images/footer/social-twitter.png');
    }
    
    #footer-social li.facebook{
       background-image: url('images/footer/social-facebook.png');
    }
    
    #footer-social li.flickr{
       background-image: url('images/footer/social-flickr.png');
    }

    #footer-social li.youtube{
       background-image: url('images/footer/social-youtube.png');
    }

    #footer-social li.vimeo{
       background-image: url('images/footer/social-vimeo.png');
    }

    #footer-social li.googleplus{
       background-image: url('images/footer/social-googleplus.png');
    }
    
    #footer-video .caption, #footer-video .entry-video-downloads{
        display: none;
    }
    
    #footer-video .video-playlist h4{
        font-size: .9em;
        text-transform: none;
    }
    
    #footer-video .video-playlist {
        width: 145px;
        float: left;
        margin-left: 10px;
        margin-bottom: 10px;
    }
    
    #footer-video .video-playlist.v2, #footer-video .video-playlist.v4{
        margin-left: 0;
        clear: both;
    }
    
    #footer-video .video-playlist.v1{
        width: inherit;
        float: none;
        clear: both;
        margin-left: 0;
        overflow: auto;
    }
    
    #footer-video .more{
        clear: both;
    }
    
    #footer #footer-col2 ul ul li {
        border-top:1px dashed #CCCCCC;
        padding-top: 10px;
        background-position:0 15px;
    }
    
    #footer #footer-col2 ul ul li:first-child{
        border-top: 0;
        padding-top: 0;
        background-position:0 6px;
    }
    
    /* stop widgets from using li styles at top level of footer */
    #footer > div > ul li{
        list-style: none;
        margin-left: 0;
    }
    
    #footer a.rsswidget img{
        display: none;
    }
    
    
/* ===================== */
/* = General Styles    = */
/* ===================== */    
    


/* Override Calpress defaults that mess with our formatting*/
#sidebar ul.xoxo ul{
    margin-bottom: 0;
}

/* Global art styles */
/*
.post img{
    border: 1px solid #EEEEEE;
    padding: 4px;
}
*/
/* Global text styles */
.entry-title a, .more a, #menu a, .navigation a{
    text-decoration: none;
}

.more{
    font-weight: bold;
    text-align: right;
}

.navigation{
    font-weight: bold;
    padding: 0 10px;
}

/* >> in page */   
.headline-leadin:after, .more a:after, p.now-playing:after{
    content:" >> ";
    font-size: .7em;
    letter-spacing: -.2em;
    line-height: .8em;
    padding-right: 1.1em;
    padding-left: .4em; 
}

.more a.no-emphasis:after{
    content: none;
}

.entry-title{
    font-size: 1.3em;
    font-weight: 300;
    line-height: 1.3em;
}

h2.entry-title{
    line-height: 1.2em;
}

/* artlead headline */
h2.artlead-headline {
	font-size: 2em;
}

.entry-meta, .entry-short-meta{
    color: #8A8A8A;
    font-size: .9em;
}

.entry-byline{
    font-weight: 300;
}

span.headline-leadin{
    color: #7c7c7c;
}

p.now-playing{
    width: 115px;
    float: left;
    font-size: .9em;
    text-transform: uppercase;
    color: #7c7c7c;
    font-weight: 600;
}

h4.now-playing, #footer h4.now-playing{
    width: 185px;
    float: left;
    font-size: .9em;
    text-transform: none;
}

.caption, .wp-caption-text, #content .caption, #content .wp-caption-text{
    color: #8A8A8A;
    font-size: 0.9em;
}

body.single #content .caption, body.single #content .wp-caption-text{
    line-height: 1.3em;
}

.list-header{
    background-color: #afafaf;
    padding: 5px;
    color: #f1f1f1;
}



/* feed list footer/subscribe */
.page-template-subscribe-php .feed-list{
    margin-top: 10px;
}

.feed-list {
  margin: 0 0 18px 5px;
  padding: 0;
  list-style-type: none;
}

.feed-list li {
  margin: 0 0 3px 0;
  padding: 0;
  list-style-type: none;
}

.feed-list li a {
  padding: 0 0 0 19px;
  background: url("images/icons/social_16/feed.png") no-repeat 0 50%;
  list-style-type: none;
  text-decoration: none;
}

.feed-list li.twitter a {
  background: url("images/icons/social_16/twitter.png") no-repeat 0 50%;
}

.feed-list li.youtube a {
  background: url("images/icons/social_16/youtube.png") no-repeat 0 50%;
}

.feed-list li.vimeo a {
  background: url("images/icons/social_16/vimeo.png") no-repeat 0 50%;
}

.feed-list li.facebook a {
  background: url("images/icons/social_16/facebook.png") no-repeat 0 50%;
}

/* List */
ol.links li, ul.links li, .popular li, ul.xoxo.blogroll > li, #footer>div ul ul li, .scroll-pane .scroll-post, #entry-sidebar ul li{
    list-style-type: none;
    margin-left: 2px;
    padding-left: 15px;
    background: transparent url('images/icons/arrow-right.png') no-repeat 0 center;
    margin-top: 10px;
}

ol.links li:first-child, ul.links li:first-child, ul.xoxo.blogroll > li:first-child, #footer>div ul ul li:first-child{
    margin-top: 0;
}

ol.links li a, ul.links li a, #entry-sidebar .entry-sidebar-links li a{
    text-decoration: none;
}

.links.divided li{
    border-top: #ccc dashed 1px;
    margin-top: 5px;
    padding-top: 2px;
}

.links.divided li:first-child{
    border-top: 0;
    padding-top: 0;
}
/* Tabbed list */

.tabbed li:first-child{
    margin-top: inherit;
}

/*
#popular.tabbed .popular, #popular.tabbed .ui-tabs-nav{
    background: transparent url('images/bg/bg-sidebar-tab.png') repeat-y 0 0;
}

#popular .ui-widget-header{
    border: 0;
}

#popular li.ui-state-default:first-child{
    border-left-color: #F1F1F1;
}

#popular.ui-widget-content{
    border-color: transparent;
}


#sidebar .xoxo:first-child > li#popular.tabbed{
    padding: 0;
} 
*/

#sidebar #popular h3{
    background: transparent url('images/sidebar-popular.png') no-repeat 0 0;
    height: 17px;
    text-indent: -999em;
}

#sidebar li#popular.tabbed{
    padding-top: 0;
}

/* CSS Calendar (sidebar assumed, implemented on ML) */

.mini-calendar ul, ul.mini-calendar{
    display: block;
    width: 300px;
    height: 190px;
    background-color: #e6e6e6;
    -moz-border-radius: 0 0 7px 7px;
    border-radius: 0 0 7px 7px;
}

ul.mini-calendar.three-month{
    height: 53px;
}

ul.mini-calendar.three-month li{
   clear: none;
   margin-top: 0;
   border-top: 0;
}

.mini-calendar li, #sidebar .mini-calendar li{
    display: block;
    float: left;
    width: 74px;
    padding: 12px 12px 6px 12px;
    border-left: 2px solid transparent;
    border-top: 1px solid #fff;
    margin: 6px 0 0 0;
    list-style-type: none;
    background-color: transparent;
}

.mini-calendar li.jan, .mini-calendar li.apr, .mini-calendar li.jul, .mini-calendar li.oct{
    border-left: 0;
    clear: left;
}

.mini-calendar li.jan, .mini-calendar li.feb, .mini-calendar li.mar{
    margin-top: 0px;
}

.mini-calendar li a, .mini-calendar li span{
    display: block;
    background-color: #fff;
    width: 74px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    text-align: center;
    text-decoration: none;
    color: #909090;
    font-size: 12px;
    line-height: 18px;
    padding-bottom: 2px;
}

.mini-calendar li a:hover{
    color: #fff;
    background-color: #909090;
}

.mini-calendar h3{
    margin-bottom: 0;
    padding: 7px 0;
    background-color: #e6e6e6;
    -moz-border-radius: 7px 7px 0 0;
    border-radius: 7px 7px 0 0;
    color: #909090;
    font-size: 15px;
    line-height: 15px;
    text-align: center;
    font-weight: normal;
}

.mini-calendar #minicalendar-calendars{
    position: relative;
    height: 190px;
    overflow: hidden;
}

.mini-calendar #currentyear, .mini-calendar #nextyear{
    position: absolute;
    top: 0;
}

.mini-calendar #currentyear{
    z-index: 100;
}

.mini-calendar #nextyear{
    z-index: 99;
}

.mini-calendar .year-current{
    left: 0;
}

.mini-calendar .year-hidden{
    left: -300px;
}

/* Inputs */

input.button { 
    padding:6px 5px 4px;
    background:#999; 
    border:1px solid #666; 
    color:#fff; 
    font:bold 9px/1 helvetica,arial,sans-serif; 
    text-align:center; 
    cursor:pointer;
    font-size: 10px;
}

input.button:hover { 
    background:#ccc; 
    border:1px solid #999; 
}

input[type="text"]{
    background-color: #F1F1F1;
    font-size: 12px;
    line-height: 12px;
    padding: 2px 0;
}

/* Ads */
.iab468x60{
    width: 468px;
    height: 60px;
    margin-left: auto;
    margin-right: auto;
}

.iab768x90{
    width: 768px;
    height: 90px;
    margin-left: auto;
    margin-right: auto;
}

.advertisement h3, h3.advertisement, p.advertisement, p.advertisement, body.single p.advertisement{
    font-size:9px;
    margin-bottom:0;
    margin-top:-5px;
    text-align:center;
    font-weight: bold;
}

#article-ad-banner{
    border-top: 1px dashed #ccc;
    padding: 10px 76px;
    min-height: 60px;
    height: inherit;
}

#prewrapper-ad-banner{
    margin: 10px auto;
}

/* Header Login */
#header-login p{
    font-size: 11px;
    line-height: 13px;
    margin-bottom: 0px;
}

p#login-profile-connected{
   font-size: 12px;
   font-weight: bold;
   color: #8A8A8A;
   padding: 3px 0;
}

#header-login #login-profile-avatar{
    width: 55px;
    float: left;
}

#header-login #login-login a{
    display: block;
    width: 220px;
    height: 60px;
    text-indent: -999em;
    background: transparent url('images/icons/facebook-connect.png') no-repeat 0 0;
}

#header #login-profile-meta{
    padding-left: 65px;
}


/* Category /archive pages / 404*/
body.archive .post, body.four04 .post{
    border-top:1px dashed #CCCCCC;
    margin-bottom: 10px;
    padding-top: 10px;
}

body.archive .p1, body.four04 .p1{
    border-top: 0;
}

body.archive .post p, body.four04 .post p{
    margin-bottom: 0px;
}

body.archive .entry-image, body.four04 .entry-image{
    margin-bottom: 0;
}

body.four04 .post.error404{
    padding-bottom: 10px;
    border-bottom: 1px dashed #CCC;
    border-top: 0;
}

body.four04 .post.error404 .entry-content{
    margin-bottom: 10px;
}

.archive-meta{
   font-style: italic;
}

/* Topic Pages */
.topic-bio{
    clear: left;
    overflow: auto;
    margin-bottom: 5px;
    border-top: 1px solid #6f6f6f;
    padding: 10px 0;
}

.topic-bio.first{
    border-top: 0;
    padding-top: 0;
}

.topic-bio p{
    margin: 0;
}

.bio-pic{
    display: block;
    width: 80px;
    float: left;
    margin-right: 10px;
}

img.bio-pic{
    height: 100px;
}

.topic-bio .topic-bio-text{
    float: left;
    width: 120px;
}

.topic-curator{
    font-weight: bold;
    margin-bottom: 2px;
    font-size: .9em;
    line-height: .9em;
}

.topic-bio .profile{
    font-style: italic;
}

/* Author page */
body.author .post, body.author .post.p1, body.author #author-comments li{
    width: inherit;
    padding: 10px 0;
    margin-bottom: 4px;
}

body.author h3.stories, body.author h3.comments, body.author h3.twitter{
    display: none;
}

body.author #author-meta{
    margin-bottom: 18px;
}

body.author .author-name a{
    text-decoration: none;
}

body.author h3.contact{
    clear: both;
}

/* Post Pages */
#mini-bio, #article-more-posts, body.single .block{
    border-top: 5px solid #f1f1f1;
    overflow: auto;
    padding-top: 5px;
    padding-bottom: 5px;
}

body.single #mini-bio p, body.single #article-more-posts p{
    font-size: 12px ;
    line-height: 18px;
    margin-bottom: 10px;
}

body.single #mini-bio img{
    float: left;
    width: 50px;
    margin-right: 10px;
    margin-bottom: 10px;
    border:1px solid #AAAAAA;
    padding:5px;
}

body.single #article-more-posts, body.single #mini-bio, body.single .block{
    clear: left;
}

body.single #article-more-posts .post{
    width: 200px;
    float: left;
    margin-left: 10px;
    margin-bottom: 0;
    overflow: visible;
}

body.single #article-more-posts .scrollable{
    min-height: 180px;
}

body.single #article-more-posts .entry-image{
    float: none;
}
body.single #article-more-posts .entry-title{
    clear: left;
}



body.single #article-more-posts span.meta-sep{
    display: inline;
}

body.single #article-more-posts .post.p1, body.single #article-more-posts .post.p4, body.single #article-more-posts .post.p7{
    margin-left: 0;
}

.single #article-more-posts{
    position: relative;
}

.single #article-more-posts .navi {
    margin-bottom:12px;
    margin-top:-22px;
}

body.single #content .entry-meta, .single #content .entry-shortmeta .entry-categories, .single #content .entry-date + .meta-sep, .single #nav-below {
    display: none;
}

.single .entry-categories p{
    border-top: 1px dashed #ccc;
    margin-top: 10px;
    margin-bottom: 3px;
    padding-top: 10px;
}

.single .entry-tags p{
    margin-bottom: 3px;
}

.single h2.entry-title{
    font-size: 2em;
    margin-bottom: 18px;
}

.single .entry-byline{
    font-weight: bold;
}

.single .post-postscript{
    clear: both;
    font-style: italic;
    padding-top: 10px;
}

#single-promo{
    border-top: 1px dashed #CCC;
    padding: 10px 0;
    overflow: auto;
}

#single-promo > a, #single-promo > div{
    width: 310px;
    float: left;
    display: block;
}

/* social icons at bottom of article */

.single ul.sociallinks{
    overflow: auto;
    margin-left: auto;
    margin-right: auto;
    width: 240px;
    clear: both;
    margin-top: 20px;
}

.single ul.sociallinks li{
    width: 40px;
    height: 40px;
    list-style-type: none;
    padding:0;
    margin:0 0 0 10px;
    float: left;
}

.single ul.sociallinks li:first-child{
    margin-left: 0;
}

.single ul.sociallinks li a{
    background:url(images/icons/social-sprite.png);
    display: block;
    width: 40px;
    height: 40px;
    text-indent: -999em;
}

.single ul.sociallinks li a.facebook{
    background-position: 0px -100px;
}
.single ul.sociallinks li a.twitter{
    background-position: 0px -200px;
}
.single ul.sociallinks li a.digg{
    background-position: 0px -50px;
}
.single ul.sociallinks li a.stumbleupon{
    background-position: 0px -150px;
}
.single ul.sociallinks li a.delicious{
    background-position: 0px 0px;
}

/*************************
 Login page
*************************/
body.login #login{
	width: 463px;
	margin-top: 50px;
}

body.login #backtoblog{
	display: none;
}

body.login h1 a{
    display: block;
    background:transparent url("images/masthead.png") no-repeat scroll 0 0;
	width: 463px;
	height: 38px;
    text-indent: -999em;
    margin-left: auto;
    margin-right: auto;
}

body.login #login form{
	background-color: #EBEBEB;
	border: 1px solid #a2a2a2;
}

body.login #nav{
	margin: 0;
}

body.login .message{
    margin: 0 0 16px 0;
}


#sidebar, #content{
    padding-top: 10px;
}

/*************************
 Sidebar Search
*************************/
#search input#s{
    width: 210px;
}

#search input.button{
   width: 69px;
   height: 22px;
   background: transparent url('images/icons/search.png') no-repeat 0 0;
   border: 0;
   text-indent: -999em;
}

#sidebar .xoxo:first-child > li {
    border-top: 10px solid #F1F1F1;
    padding: 10px 0;
}

#sidebar .xoxo:first-child > li:first-child{
    border-top: 0;
    margin-top: 0;
    padding-top: 0;
}

/*************************
 Comments
*************************/
.bypostauthor {
    background-color:#CCCCCC;
}

#comments li.comment.featured{
    background: transparent url('images/icons/staffpick.png') no-repeat top right;
    padding-right: 58px;
}

#comments li.comment.featured > div > p{
    font-style:italic;
}

#comments li.comment.featured div.comment-meta{
    right: 75px;
}

#comments-list > h3 {
    background-color: #f1f1f1;
    color: #000;
}

ol.commentlist li, ol.commentlist li div.vcard img.avatar {
    border:1px solid #F1F1F1;
}

/*************************
 Called out
*************************/
#called-out .called-out-comment, .called-out .called-out-comment{
    width: 230px;
    margin: -25px auto;
}

#called-out .featured-comment, .called-out .featured-comment{
    font-size: 17px;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

#called-out .comment-meta, .called-out .comment-meta{
    font-size: 10px;
    margin-bottom: 0;
    padding: 3px;
}

#called-out a, .called-out a{
    text-decoration: none;
}

#called-out a:hover, .called-out a:hover{
    text-decoration: underline;
}

#called-out .quote, .called-out .quote{
    font-size:1.4em;
    font-weight:bold;
    position:relative;
    top:3px;
}

/* 3 col */
.called-out-3col h3 {
    background:url("images/icons/calledout-top-3col.png") no-repeat scroll 0 0 transparent;
    height:90px;
    text-indent:-999em;
}

.called-out-3col{
    padding-bottom: 102px; 
    background: transparent url('images/icons/calledout-bottom-3col.png') no-repeat center bottom;
}

.called-out-3col .featured-comment{
    font-size: 14px;
}

.called-out-3col .called-out-comment{
    width: 200px;
    margin: -5px auto;
}

/* sidebar */
#sidebar #called-out h3{
    height: 123px;
    background: transparent url('images/icons/calledout-top.png') no-repeat 0 0;
    text-indent: -999em;
}

#sidebar #called-out{
    padding-bottom: 123px; 
    background: transparent url('images/icons/calledout-bottom.png') no-repeat center bottom;
}

.commented-on{
    color: #8A8A8A;
}

.comment-post-title{
    font-weight: bold;
}

/*************************
Rails
*************************/

/* Story rail */

#entry-sidebar{
    margin-left:10px;
    padding-left:10px;
    padding-right:10px;
    padding-top: 16px;
    padding-bottom: 10px;
    background-image: url('images/rails/rail_top.png'), url('images/rails/rail_bottom.png');
    background-repeat: repeat-x;
    background-position: center top, center bottom;
    background-color: #f1f1f1;
}

/*  Topic / Category secondary rail */
.secondary-rail{
    padding: 16px 5px;
    background-image: url('images/rails/rail_top.png'), url('images/rails/rail_bottom.png');
    background-repeat: repeat-x;
    background-position: center top, center bottom;
    background-color: #f1f1f1;
}

.secondary-rail + .secondary-rail{
    margin-top: 10px;
}

.secondary-rail.logo{
    background-image: url('images/rails/rail_3col_logo_top.png'), url('images/rails/rail_bottom.png');
    padding-top: 60px;
}

/*************************
Front page
*************************/
body.front-layout-blog .post{
    border-top: 1px dashed #ccc;
    padding-top: 15px;
    margin-bottom: 15px;
}

body.front-layout-blog .p1{
    border-top: 0;
    padding-top: 0;
}

body.front-layout-blog .post p{
    margin-bottom: 2px;
}

body.home.paged .post{
    border-top-style: dashed;
    border-color: #ccc;
}

body.home #content h3{
    border-color: #ccc;
}

#lead-story {

}

    #lead-story #fresh{
        display: block;
        width: 70px;
        height: 67px;
        position: relative;
        left: 556px;
        background-image: url('images/icons/fresh.png');
        text-indent: -9999em;
    }
    
    #lead-story .post{
        margin-top: 10px;
    }
    
    #lead-story #fresh+.post{
        margin-top: -67px;/* offset for the "fresh block" bg grapihc*/
        padding-top: 10px;
    }

    #lead-story p{
        margin-bottom: 0;
        padding-left: 300px;
        margin-top: 10px;
    }
    
    .front-layout-artlead #lead-story p{
        padding-left: 0px;
    }
    
    #lead-story p:first-child{
        margin-top: 0;
    }
    
    #lead-story .lead-art, #lead-story .caption{
        width: 300px;
        float: left;
        margin-right: 10px;
    }
    
    .front-layout-artlead #lead-story .lead-art, .front-layout-artlead #lead-story .caption{
        width: 620px;
        float: none;
        margin-right: 0;
    }
    
    .front-layout-artlead #lead-story .entry-title{
        margin-top: 10px;
    }
    
    #content #lead-story .caption{
        clear: left;
        width: 280px;
        padding: 0 10px;
        font-size: .8em;
        line-height: 1.3em;
    }
    
    .front-layout-artlead #content #lead-story .caption{
        width: 600px;
    }
    
    #lead-story .entry-title, #lead-story .entry-meta, #lead-story .entry-content{
        margin-left: 10px;
    }
    
    .front-layout-artlead #lead-story .entry-title, .front-layout-artlead #lead-story .entry-meta, .front-layout-artlead #lead-story .entry-content{
        margin-left: 0px;
    }
    
    #lead-story #fresh + .post .entry-title{
        padding-right: 53px; /* If the the star graphic is being shown, shorten headline */
    }
    
    #lead-story .entry-title{
        margin-bottom: 9px;
    }

    #lead-story .entry-meta{
        margin-bottom: 12px;
    }
    
    
#tertiary-stories>div.post, ul.posts li{
    width:280px;
    padding-left:20px;
    border-top:1px dashed #CCCCCC;
    float:left;
    margin:0 0 7px 10px;
    padding-top:7px;
    background: transparent url('images/icons/star.png') no-repeat left 12px;
}
    
    #tertiary-stories .entry-title{
        font-size: 1em;
        font-weight: normal;
    }

    
body.front-layout-news2 #tertiary-stories>div.post, body.front-layout-news2-alt #tertiary-stories>div.post{
    margin-left: 0;
    padding-left: 20px;
    width: 280px;
}

body.front-layout-news2 #tertiary-stories > div:first-child, body.front-layout-news2-alt #tertiary-stories> div:first-child{
    margin-top: 10px;
}

body.front-layout-news2 #tertiary-stories .entry-title, body.front-layout-news2-alt #tertiary-stories .entry-title{
   font-size: 1.2em;
   line-height: 1.2em;
}

body.front-layout-news2 #secondary-stories > div, body.front-layout-news2-alt #secondary-stories > div {
    border-top: 1px dashed #ccc;
    padding-top: 10px;
}

body.front-layout-news2 #secondary-stories > div p, body.front-layout-news2-alt #secondary-stories > div p{
    margin-bottom: 0;
}

/* front-layout-news3 */
body.front-layout-news3 #tertiary-stories .entry-title, body.front-layout-news3-alt #tertiary-stories .entry-title{
   font-size: 1.2em;
   line-height: 1.2em;
}

body.front-layout-news3 #tertiary-stories>div.post, body.front-layout-news3-alt #tertiary-stories>div.post{
    margin-left: 0;
    padding-left: 20px;
    width: 280px;
}

body.front-layout-news3 #tertiary-stories>div:first-child, body.front-layout-news3 #tertiary-stories>div:first-child{
    border-top: 0;
    margin-top: 10px;
}

body.front-layout-news3 #secondary-stories, body.front-layout-news3-alt #secondary-stories{
    border-color: #ccc;
}

/* front-layout-news4 */
body.front-layout-news4 #tertiary-stories .entry-title, body.front-layout-news4-alt #tertiary-stories .entry-title{
   font-size: 1.2em;
   line-height: 1.2em;
}

body.front-layout-news4 #tertiary-stories>div.post, body.front-layout-news4-alt #tertiary-stories>div.post{
    margin-left: 0;
    padding-left: 20px;
    width: 280px;
}

body.front-layout-news4 #tertiary-stories>div:first-child, body.front-layout-news4 #tertiary-stories>div:first-child{
    border-top: 0;
    margin-top: 10px;
}

body.front-layout-news4 #secondary-stories, body.front-layout-news4-alt #secondary-stories{
    border-color: #ccc;
}

/* Fix for lack of extra p tag before excerpt */
div#secondary-stories div.entry-content {
	margin-top: 1em;
}

.home.paged .post{
        border-color: #ccc;
}

.home .entry-video-downloads{
    display: none;
}

ul.posts li{
    margin-left: 0;
    list-style-type: none;
}

ul.posts li.more{
    background-image: none;
    border-top: 0;
}

#special-features ul.posts li:first-child{
    border-top: 0;
}

#special-features ul.posts li a{
    text-decoration: none;
}

#nav-below{
    margin-bottom: 10px;
}

body.archive #nav-below{
    margin-top: 20px;
}

/* tables */

table{
    width: 100%;
}

th {
    background:none repeat scroll 0 0 #f1f1f1;
    color:#000000;
    text-align:left;
    text-transform:uppercase;
    vertical-align:middle;
}



th, td{
    padding-left: 3px;
    border-bottom:1px solid #f1f1f1;
    border-top:1px solid #f1f1f1;
    border-left: 2px solid #FFFFFF;
    font-size:10px;
    letter-spacing:2px;
    padding:6px;
    text-align:left;
    text-transform:uppercase;
}

th:first-child, td:first-child{
    border-left: 0;
}

tr{
    background-color: #fff;
}

tr:hover{
    background-color: #eee;
}

tr.alt{
    /*background-color: #a2a2a2;*/
}

/* jquery tools */

/*
	root element for the scrollable.
	when scrolling occurs this element stays still.
*/
#special-features{
    position: relative;
}

.scrollable {

	/* required settings */
	position:relative;
	overflow:hidden;
	width: 620px;
	height:118px;
}

/*
	root element for scrollable items. Must be absolutely positioned
	and it should have a extremely large width to accomodate scrollable items.
	it's enough that you set the width and height for the root element and
	not for this element.
*/
.scrollable .items {
	/* this cannot be too large */
	width:20000em;
	position:absolute;
	clear:both;
}

.items div {
	float:left;
	width:620px;
}

/* single scrollable item */
.scrollable img, .scrollabe a {
    display: block;
	background-color:#fff;
	width:200px;
	height:118px;
}


.scrollable a{
    float:left;
    margin:0px 0px 0px 10px;
}

.scrollable a:first-child{
    margin-left: 0;
}



/* active item */
.scrollable .active {
	border:2px solid #000;
	position:relative;
	cursor:default;
}

/* this makes it possible to add next button beside scrollable */
.scrollable {
	float:left;	
}

/* prev, next, prevPage and nextPage buttons */
a.browse {
	background-color: #818181;
	display:block;
	width:11px;
	height:12px;
	float:left;
	margin:5px 10px;
	cursor:pointer;
	font-size:1px;
}

a.browse:hover{
    background-color: #f1f1f1;
}

a.browse:active{
    background-color: #FFE286;
}

/* right */
a.right 		{ background: transparent url('images/icons/arrow-right.png') no-repeat 2px 2px; clear:right; margin-right: 0px;} 


/* left */
a.left				{ background: transparent url('images/icons/arrow-left.png') no-repeat 2px 2px; margin-left: 0px; } 

/* up and down */
a.up, a.down		{ 
	background:url(../img/scrollable/arrow/vert_large.png) no-repeat; 
	float: none;
	margin: 10px 50px;
}

/* up */
a.up:hover  		{ background-position:-30px 0; }
a.up:active  		{ background-position:-60px 0; }

/* down */
a.down 				{ background-position: 0 -30px; }
a.down:hover  		{ background-position:-30px -30px; }
a.down:active  	{ background-position:-60px -30px; } 


/* disabled navigational button */
a.disabled {
	visibility:hidden !important;		
} 	

/* position and dimensions of the navigator */
.navi {
    height:20px;
    margin-bottom:12px;
    margin-left:287px;
    margin-top:-42px;
    width:200px;
}


/* items inside navigator */
.navi a {
	width:11px;
	height:12px;
	float:left;
	margin:3px;
	background-color: #818181;
	display:block;
	font-size:1px;
}

/* mouseover state */
.navi a:hover {
	background-color: #ccc;
}

/* active state (current page state) */
.navi a.active {
	background-color: #ffe286;  
}

.naviarrows{
    position: absolute;
    top: 5px;
    right: 0;
    overflow: auto;
    width: 44px;
}

/* packages */
body.wide #wrapper, body.election2010 #wrapper{
    background-image: none;
}

/* events */
body.category-events #nav-above{
    display: block;
}

/*************************
Election 2010
*************************/

body.election2010 h2.page-title{
    width: 940px;
    height: 66px;
    text-indent: -999em;
    background-image: url('images/categories/election_header_narrow.png');
}

body.election2010 .story-block .post{
    border-top: 1px dashed #ccc;
    padding-top: 15px;
    margin-bottom: 10px;
}

body.election2010 .story-block .post p{
    margin-bottom: 0;
}

body.election2010 .story-block .p1{
    border-top: 0;
    padding-top: 0;
}

body.election2010 .story-block .entry-title{
    font-size: 1.5em;
}

body.election2010 .firstrail{
    margin-right: 0;
    padding-right: 9px;
    border-right: 1px dashed #ccc;
}

body.election2010 .video-feed .entry-video-downloads, body.election2010 .video-feed .entry-leadvideo .caption{
    display: none;
}

body.election2010 #sidebar.thirdrail{
    margin-top: 10px;
    padding-top: 0;
    background-color: #f1f1f1;
}

body.election2010 #sidebar .sidebar-element {
    padding:5px 9px;
}

body.election2010 #sidebar li{
    list-style-type: none;
    background-color: inherit;
    background:url("images/icons/star.png") no-repeat scroll left 12px transparent;
    border-top:1px dashed #CCCCCC;
    margin:0 0 7px 10px;
    padding-left:20px;
    padding-top:7px;
    width: 162px;
}

body.election2010 #sidebar li.more{
    background-image: none;
    padding-left: 0;
    width: 182px;
}

body.election2010 #sidebar li:first-child{
    border-top: 0;
}

body.election2010 h3.section{
    font-variant: small-caps;
    font-size: 1em;
    border-bottom: 1px solid #000;
}

body.election2010 .called-out-3col{
    margin-bottom: 20px;
}

/* weather */

.weather-page span{
    display: block;
}

.weather-page .temperature{
    font-size: 100px;
    line-height: 94px;
}
.weather-page .conditions_text{
    font-size: 30px;
}

.weather-page.forecast .temperature{
    font-size: 30px;
    line-height: 20px;
}

p.weather-page{
    width: 204px;
    height: 90px;
    float: left;
    text-align: center;
}

p.weather-page.forecast{
    width: 202px;
}

.weather-page.temperature{
    border-right: 1px dashed #ccc;
}

.weather-page.forecast{
    border-left: 1px dashed #ccc;
}

.weather-page.forecast .forecast_low{
    margin-top: 10px;
}

.forecast{
    font-variant: small-caps;
}

.forecast_high{
    color: #BD2031;
}

.forecast_low{
    color: #006295;
}

.weather-page.forecast .weather-meta{
    text-align: left;
    font-size:13px;
    padding-left:46px;
}

.weather-meta, span .weather-meta{
    color: #CCC;
    font-size: 16px;
    line-height: 16px;
}

#regional-weather, #secondary-weather{
    clear: left;
    border-top: 1px dashed #CCC;
    padding-top: 20px;
}

#secondary-weather > div {
    float: left;
    border-left: 1px dashed #CCC;
    width: 130px;
    padding-left: 9px;
    margin-left: 20px;
    min-height: 60px;
}

#secondary-weather > div:first-child{
    border-left: 0;
    width: 140px;
    padding: 0;
    margin-left: 0;
}

#secondary-weather > div > h4 + p > span {
    display: block;
}

#secondary-weather > div > h4 + p > span > span{
    font-variant: small-caps;
}

#secondary-weather .forecast_high, #secondary-weather .forecast_low, #regional-weather .forecast_high, #regional-weather .forecast_low{
    display: block;
}

#secondary-weather .forecast span.weather-meta, #regional-weather .forecast span.weather-meta{
    padding-right: 3px;
}

#secondary-weather .forecast p, #regional-weather .forecast p{
    width: 70px;
    float: left;
    margin-top: 5px;
}

#secondary-weather .forecast img, #regional-weather .forecast img{
    width: 50px;
    height: 50px;
    display: block;
    float: left;
    margin-right: 10px;
}

#regional-weather h5{
    font-size: 11px;
}

#regional-weather .city-list{
    margin-left:0;
    padding-left:9px;
    border-left: 1px dashed #CCC;
}
